<template>
     <div>
           <label>关键词：<input v-model="keyword"></label>
            <label>地区：<input v-model="location"></label>
         地图:<div>{{this.center}}</div>
    <baidu-map class="map" :center="center" @ready="initMap">
        <bm-transit :start="start" :end="end" :auto-viewport="true" location="北京"></bm-transit>
        起点<input v-model="start" >终点 <input v-model="end">
    </baidu-map>
  </div>
</template>
<script>
export default {
  data() {
    return {
      center: "北京",
      start:"",
      end:"",
      location: '',
      keyword: ''
    };
  },
  methods: {
    initMap({ BMap, map }) {
      this.map = map;
      this.BMap = BMap;
      //利用地图功能获取定位信息
      var g = new BMap.Geolocation();
      g.getCurrentPosition(
        info => {
          // console.log(info);
          this.center = info.address.city;
          console.log(info);

            //具体定位信息
          const gc = new this.BMap.Geocoder();
          gc.getLocation(info.point, rs => {
            console.log(rs);
          });
        },
        err => {
          console.lo(err);
        }
      );
    }
  },


  created(){
       this.$store.commit("changeNavFlag", false);
  }
};
</script>
<style lang="scss" scoped>
.map {
  height: 500px;
  width: 100%;
}
</style>